<script setup>
import { useRouter } from 'vue-router';
import { usePostListStore } from '@/stores/post';
import { useUserListStore, useUserStore } from '@/stores/user';
import { ref } from 'vue'

const router = useRouter()
const user = useUserStore()
const comments = ref(user.userInfo.comments)
const post = usePostListStore()
const userList = useUserListStore()


function toback() {
    router.back()
}

</script>

<template>
    <div class="main">
        <van-nav-bar title="评论" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <div class="box" v-for="item in comments">
                <img class="user" :src="userList.getUserInfo(item.userid).img" alt="">
                <div class="right">
                    <h3>{{ userList.getUserInfo(item.userid).username }}</h3>
                    <small>{{ post.getCommnet({
                        postid: item.postid,
                        commentid: item.commentid
                    }).date }} &nbsp;&nbsp;&nbsp;&nbsp;评论了你</small>
                    <p>
                        {{ post.getCommnet({
                            postid: item.postid,
                            commentid: item.commentid
                        }).text }}
                    </p>
                    <div class="post">
                        <img :src="post.getPost(item.postid).img" alt="">
                        <p>{{ post.getPost(item.postid).postText }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    display: flex;
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px rgb(234, 234, 234) solid;
    box-sizing: border-box;

    .user {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 20px;
    }

    .right {
        flex: 1;

        small {
            color: grey;
        }

        h3,
        p {
            margin: 0;
        }

        .post {
            display: flex;
            background-color: gainsboro;
            width: 100%;
            padding: 4px;
            box-sizing: border-box;
            border-radius: 4px;

            img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
        }
    }
}
</style>